<!doctype html>
<html lang="en">
{% load static %}

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>城市智能交通分析系统</title>
	<!-- css样式 -->
	<link type="text/css" rel="stylesheet" href="../static/bootstrap/css/bootstrap.css">
	<link type="text/css" rel="stylesheet" href="../static/css/sideBar.css">
	<link type="text/css" rel="stylesheet" href="../static/font-awesome/css/font-awesome.css" />
	<link href="../static/css/ol.css" rel="stylesheet" />
	<!-- js样式 -->
	<script type="text/javascript" src="{%static 'js/jquery-3.4.1.js'%}"></script>
	<script type="text/javascript" src="{%static 'bootstrap/js/bootstrap.js'%}"></script>
	<script type="text/javascript" src="{%static 'js/ol.js'%}"></script>
</head>

<body class>
	<div class="container-fluid">
		<div class="row">
			<!-- 侧边栏 -->
			<div class="sidebar" style="background:#cfebf1">
				<h4 style="background:#8cb9c4; color: black; text-align: center; font-size:x-large;font-family:华文彩云">驾驶辅助决策系统</h4>
				<div class="cover" style="background:#68cae2; color:rgb(255, 255, 255)">
					<h2><img class="img-circle" src="../static/img/car.png" /></h2>
					<b style="color: black;">Hi~ 小主</b>
				</div>
				<ul class="sidenav animated fadeInUp">
					<!-- 一级标题 -->
					<li>
						<a class="withripple hover" href="javascript:;" style="background:#68cae2;  color:black ">
							<i class="fa  fa-user-circle" aria-hidden="true"></i>
							<span class="sidespan">司机辅助系统</span>
							<i class="iright pull-right">&gt;</i>
						</a>
						<ul class="sidebar-dropdown" >
							<li>
								<a id='route_plan' class="withripple" style="background:#68cae2;  color:black ">路径规划
								</a>
							</li>
						</ul>
					</li>
					<!-- 二级标题 -->
					<li>
						<a class="withripple" href="javascript:;" style="background:#afd9e4;  color:black ">
							<i class="fa fa-taxi" aria-hidden="true"></i>
							<span class="sidespan">区域综合分析</span>
							<i class="iright pull-right">&gt;</i>
						</a>
						<ul class="sidebar-dropdown">
							<li>
								<a id="hotpot_zone_analysis" class="withripple" style="background:#afd9e4; color:black">热点区域分析
								</a>
							</li>
							<li>
								<a id="network_module" class="withripple" style="background:#afd9e4;  color:black ">网络社区模块
								</a>
							</li>
						</ul>
					</li>
					<!-- 三级标题 -->
					<li>
						<a class="withripple hover" href="javascript:;" style="background:#68cae2;  color:black ">
							<i class="fa  fa-rocket" aria-hidden="true"></i>
							<span class="sidespan">城市辅助决策</span>
							<i class="iright pull-right">&gt;</i>
						</a>
						<ul class="sidebar-dropdown">
							<li>
								<a id="city_plan_analysis" class="withripple" style="background:#68cae2;  color:black ">上下车点周围查询
								</a>
							</li>
							<li>
								<a id="traffic_jam" class="withripple" style="background:#68cae2;  color:black ">拥堵路段分析
								</a>
							</li>
						</ul>
					</li>
					<!-- 四级标题 -->
					<li>
						<a class="withripple" href="javascript:;" style="background:#afd9e4;  color:black ">
							<i class="fa fa-truck" aria-hidden="true"></i>
							<span class="sidespan">司机情况概览</span>
							<i class="iright pull-right">&gt;</i>
						</a>
						<ul class="sidebar-dropdown">
							<li>
								<a id="track_recall" class="withripple" style="background:#afd9e4;  color:black ">危险驾驶行为回溯</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
			<!-- 主体部分  -->
			<div class="main">
				<!-- 上方标题 -->
				<div class="main-title">
					<!-- 左侧下拉框 -->
					<ul class="nav navbar-nav navbar-left navbar-side">
						<li>
							<a href="">
								<i class="fa fa-sliders" aria-hidden="true" ></i>
							</a>
						</li>
					</ul>
					<!-- 右侧下拉框 -->
					<ul class="nav-right navbar-nav navbar-left navbar-side-right">
						<li>
							<a href="">
								<i class="fa fa-bar-chart" aria-hidden="true"></i>
							</a>
						</li>
					</ul>
				</div>
				<!-- 右侧参数设置 -->
				<div class="sidebarright" style="background:#cfebf1">
					<h4 style="text-align: center; background: #5ec4dd;">参数设置</h4>
					<form>
						<p class="text-danger" style="font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;">radius size</p>
						<input id="radius" type="range" min="1" max="10" step="1" value="1" />
						<p class="text-danger" style="font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;">blur size</p>
						<input id="blur" type="range" min="1" max="5" step="1" value="3" />
					</form>
					<button type="button" class="btn btn-info btn-group btn-group-justified"
						onclick="addInteraction()">绘制多边形(双击结束)</button>
					<br />
					<button type="button" class="btn btn-info btn-group btn-group-justified"
						onclick="polyQuery()">多边形空间查询</button>
					<br />
					<select class="selectpicker btn-danger btn-group btn-group-justified" data-style="btn-warning"
						id="select1">
						<optgroup label="全市">
							<option>武汉</option>
						<optgroup label="武昌">
							<option>武昌区</option>
							<option>洪山区</option>
							<option>青山区</option>
						</optgroup>
						<optgroup label="汉口">
							<option>江岸区</option>
							<option>江汉区</option>
							<option>桥口区</option>
						</optgroup>
						<optgroup label="汉阳">
							<option>汉阳区</option>
						</optgroup>
					</select>
					<br />
					<select class="selectpicker btn-primary btn-group btn-group-justified" id="select2">
						<optgroup label="出租车ID">
							<option>1015</option>
							<option>129</option>
							<option>16956</option>
							<option>2255</option>
							<option>46167</option>
							<option>31267</option>
							<option>17009</option>
							<option>46167</option>
							<option>583</option>
							<option>15702</option>
							<option>9198</option>
					</select>
					<br />
					<select class="selectpicker btn-warning btn-group btn-group-justified" id="select3">
						<optgroup label="轨迹时间">
							<option>11月05</option>
					</select>
					<br />
					<button type="button" class="btn btn-info btn-group btn-group-justified"
						onclick="AjaxQuery();">列表查询</button>
					<br />
					<button type="button" class="btn btn-info btn-group btn-group-justified"
						onclick="ClearLayer();">清空图层</button>
				</div>
				<!-- 右侧框架 -->
				<div id="right_frame" style="background:#797985; color:#FFF">
					<div id="map" style="width: 140%;height: 1000px;overflow: hidden;"></div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="{%static 'js/sideBar.js'%}"></script>
	<script type="text/javascript" src="{%static 'js/hotpot.js'%}"></script>
</body>

<script type="text/javascript">
	var localhost = '172.16.5.236'
	$("#route_plan").attr("href", "http://" + localhost + ":8000/web/route/");
	$("#hotpot_zone_analysis").attr("href", "http://" + localhost + ":8000/web/hotpot/")
	$("#network_module").attr("href", "http://" + localhost + ":8000/web/network/")
	$("#city_plan_analysis").attr("href", "http://" + localhost + ":8000/web/cityplan/")
	$("#traffic_jam").attr("href", "http://" + localhost + ":8000/web/traffic/")
	$("#track_recall").attr("href", "http://" + localhost + ":8000/web/trackrecall")
	$("#driving_feature").attr("href", "http://" + localhost + ":8000/web/drivingfeature/")
	//底图
	var raster = new ol.layer.Tile({
		source: new ol.source.Stamen({
			layer: 'toner'
		})
	});
	var map = new ol.Map({
		layers: [raster],
		target: 'map',
		view: new ol.View({
			center: ol.proj.fromLonLat([114.5, 30.5]),
			zoom: 10
		})
	});

	var blur = document.getElementById('blur');
	var radius = document.getElementById('radius');
	blur.addEventListener('input', function () {
		vector.setBlur(parseInt(blur.value, 5));
	});

	radius.addEventListener('input', function () {
		vector.setRadius(parseInt(radius.value, 10));
	});
	//矢量图层 获取geojson数据
	var t = "{{track_url}}";
	var track_url = t.replace(/amp;/g, '')

	var vectorSource = new ol.source.Vector({
		url: track_url,
		format: new ol.format.GeoJSON()
	})
	// Heatmap热力图             
	var vector = new ol.layer.Heatmap({
		source: vectorSource,
		blur: parseInt(blur.value, 10),
		radius: parseInt(radius.value, 10),
	});
	map.addLayer(vector);
	// 添加画图图层
	var drawSource = new ol.source.Vector({
		wrapX: false
	});
	var drawVector = new ol.layer.Vector({
		source: drawSource
	});
	map.addLayer(drawVector);
</script>

</html>